<template>
    <div class="app-container">
        <el-row class="search">
            <el-date-picker v-model="query.stime" style="width: 150px" type="date" placeholder="开始"
                value-format="yyyy-MM-dd">
            </el-date-picker>
            <span>-</span>
            <el-date-picker v-model="query.etime" style="width: 150px" type="date" value-format="yyyy-MM-dd"
                placeholder="结束">
            </el-date-picker>

            <el-input v-model="query.s" prefix-icon="el-icon-search" style="width: 300px" placeholder="用户名、部门、模块名"
                @keyup.enter.native="search"></el-input>

            <el-button type="warning" @click="search" round>搜&nbsp;&nbsp;索</el-button>
        </el-row>
        <el-row>
            <el-table :data="list" :header-cell-style="{ background: '#f2f2f2' }" border style="width: 100%"
                highlight-current-row>
                <el-table-column prop="name" label="帐户名">
                </el-table-column>
                <el-table-column prop="depts" label="部门"> </el-table-column>
                <el-table-column prop="title" label="模块名称"> </el-table-column>
                <el-table-column prop="path" label="路径"> </el-table-column>
                <el-table-column prop="ctime" label="访问时间"> </el-table-column>
            </el-table>
        </el-row>
        <el-row>
            <div class="block">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="query.current" :page-sizes="[5, 10, 20, 50, 100, 200, 300, 400]" :page-size="query.size"
                    layout="total, sizes, prev, pager, next, jumper" :total="query.total">
                </el-pagination>
            </div>
        </el-row>
    </div>
</template>
<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
// import { UserModule } from "@/store/modules/user";
import { sysops } from "@/api/sysops";
@Component({
    name: "sys-ops",
})
export default class extends Vue {

    private created() {
        this.search();
    }
    private list: any = [];
    private query = {
        stime: this.Format("yyyy-MM-dd", new Date()),
        etime: this.Format("yyyy-MM-dd", new Date()),
        s: '',
        page: 1,
        size: 10,
        total: 0,
        current: 1,
    }
    //每页改变事件
    private handleSizeChange(val: number) {
        this.query.size = val;
        this.query.page = 1;

    }
    private async search() {
        this.query.page = 1;
        this.loadData();
    }
    //每页大小改变事件
    private handleCurrentChange(val: number) {
        this.query.page = val;
        this.loadData();
    }
    private async loadData() {
        let d: any = await sysops(this.query)
        d = d.data;
        this.list = d.records;
        this.query.total = d.total;
    }
    private Format(fmt: string, date: Date) {
        //author: meizz
        var o: any = {
            "M+": date.getMonth() + 1, //月份
            "d+": date.getDate(), //日
            "h+": date.getHours(), //小时
            "m+": date.getMinutes(), //分
            "s+": date.getSeconds(), //秒
            "q+": Math.floor((date.getMonth() + 3) / 3), //季度
            S: date.getMilliseconds(), //毫秒
        };
        if (/(y+)/.test(fmt))
            fmt = fmt.replace(
                RegExp.$1,
                (date.getFullYear() + "").substr(4 - RegExp.$1.length)
            );
        for (var k in o) {
            if (new RegExp("(" + k + ")").test(fmt)) {
                fmt = fmt.replace(
                    RegExp.$1,
                    RegExp.$1.length == 1
                        ? o[k]
                        : ("00" + o[k]).substr(("" + o[k]).length)
                );
            }
        }

        return fmt;
    }
}
</script>